<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列左窄右宽</title>
	<style type="text/css">
	*{margin: 0;
		padding: 0;}
		.top,.banner,.main,.footer{width: 960PX;
		background-color:orange;
		margin: 0 auto;
		border:1px dashed #ccc;
		text-align: center;
		background-color: #eee;
		margin-bottom: 8px;}
		.top{height: 80px;}
		.banner{height: 150px;}
		.main{height:500px;}
		.left{width: 360px;height: 500px;
			float: left;
			background-color: pink;}
		.right{width: 550px;height: 500px;
			float: right;background-color: red;}
		.footer{height: 120px;}
	</style>
</head>
<body>
	<div class="top">top</div>
		<div class="banner">banner</div>
			<div class="main">
			<div class="left">left</div>
			<div class="right">right</div>
			</div>
			<div class="footer">footer</div>
</body>
</html>